<template>
  <div class="dicts-list">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        :title="item.dictName"
        :name="index"
        v-for="(item, index) in datas"
        :key="index"
      >
        <template v-if="flag">
          <el-table :data="tableData[index].children">
            <el-table-column prop="id" label="id" width="200px">
            </el-table-column>
            <el-table-column prop="dictCode" label="字典编号" width="200px">
            </el-table-column>
            <el-table-column prop="dictName" label="字典名称" width="200px">
            </el-table-column>
            <el-table-column prop="dictKey" label="字典键值" width="200px">
            </el-table-column>
            <el-table-column prop="dictParentId" label="上级字典" width="200px">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="amendNews(scope.row)"
                  >编辑</el-button
                >
                <el-button type="warning" @click="removeNews(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { getDicts } from '@/api/dicts'
export default {
  data() {
    return {
      flag: true,
      tableData: [],
      datas: [],
      activeNames: [0]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    async getData() {
      const res = await getDicts()
      this.datas = res.data.data
      this.tableData = res.data.data
    }
  }
}
</script>
<style lang="scss">
.dicts-list {
  .is-active {
    background-color: skyblue;
  }
}
</style>